<!--我的关注页面-->
<template>
  <div class="follow">
    <!--我的关注tab切换-->
    <div class="follow-tab">
      <div @click="getCollection(3)" class="follow-tab-list" :class="{active:cur==0}">收藏的房源</div>
      <div @click="getAttention(3)" class="follow-tab-list" :class="{active:cur==1}">关注的楼盘</div>
      <div @click="getAttentionCommunity()" class="follow-tab-list" :class="{active:cur==2}">关注的联合办公</div>
      <div class="search">
        <div class="search-input">
          <el-input placeholder="请输入搜索内容…" prefix-icon="el-icon-search" v-model="keyword"></el-input>
        </div>
        <div class="search-bt">
          <el-button type="primary" @click="searchList()">搜索</el-button>
        </div>
      </div>
    </div>
    <!--收藏的房源-->
    <div class="follow-list" v-show="cur==0">
      <div class="follow-list-item">
        <div class="follow-list-item-click">排序：</div>
        <div class="follow-list-item-click" @click="getCollection(0)" :class="{active:son==0}">
          价格
          <i class="fa fa-sort-amount-desc"></i>
        </div>
        <div class="follow-list-item-click" @click="getCollection(1)" :class="{active:son==1}">
          面积
          <i class="fa fa-sort-amount-desc"></i>
        </div>
        <div class="follow-list-item-click" @click="getCollection(2)" :class="{active:son==2}">
          单价
          <i class="fa fa-sort-amount-desc"></i>
        </div>
      </div>
      <div class="follow-floor-center">
        <div class="follow-floor-list" v-for="item in collectList" :key="item.houseId" @click="goDetail(item)">
          <div class="follow-floor-list-img">
            <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
          </div>
          <div class="follow-floor-list-title">{{item.houseTitle}}</div>
          <div class="follow-floor-bt">
            <div class="follow-floor-bt-title">
              <span>{{item.monthPrice }}</span> 万元/月
            </div>
            <div class="follow-floor-bt-title">
              <span>{{item.price}}</span> 元/平米
            </div>

            <!-- <div class="follow-floor-bt-img">
              <img src="../assets/images/icon_add.png">
            </div>-->
            <!-- <div class="follow-floor-bt-img" @click="delCollection(item.houseId)">
              <img src="../assets/images/icon_delete.png">
            </div>-->
          </div>
          <div class="del-collect" style="text-align:right;padding:8px;font-size:12px;color:#39b4ff;cursor:pointer;" @click.stop="delCollection(item.houseId)">
            取消收藏
          </div>
        </div>
      </div>
    </div>

    <!--关注的楼盘-->
    <div class="follow-list" v-show="cur==1">
      <div class="follow-list-item">
        <!-- <div class="follow-list-item-click">排序：</div>
        <div class="follow-list-item-click" @click="getAttention(0)" :class="{active:son==0}">
          价格
          <i class="fa fa-sort-amount-desc"></i>
        </div>
        <div class="follow-list-item-click" @click="getAttention(1)" :class="{active:son==1}">
          面积
          <i class="fa fa-sort-amount-desc"></i>
        </div>-->
        <!--<div class="follow-list-item-click" @click="son=2" :class="{active:son==2}">单价<i class="fa fa-sort-amount-desc"></i></div>-->
      </div>
      <div class="follow-floor-center">
        <div class="follow-floor-list" v-for="item in attentionList" :key="item.buildingId" @click="goBuildingDetail(item)">
          <div class="follow-floor-list-img">
            <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
          </div>
          <div class="follow-floor-list-title">{{item.buildingName}}</div>
          <div class="follow-floor-bt">
            <div
              class="follow-floor-bt-name"
              @click.stop="delAttention(item.buildingId,1)"
              style="margin-left:180px;cursor:pointer;"
            >取消关注</div>
            <!-- <div class="follow-floor-bt-name" style="margin-right: 45px;">进入楼盘</div> -->
            <!-- <div class="follow-floor-bt-img">
              <img src="../assets/images/icon_add.png">
            </div>-->
            <!-- <div class="follow-floor-bt-img">
              <img src="../assets/images/icon_delete.png">
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <!--关注的联合办公-->
    <div class="follow-list" v-show="cur==2">
      <!-- <div class="follow-union-title">XXXX品牌</div> -->
      <div class="follow-union-center">
        <div class="follow-union-list" v-for="item in communityList" :key="item.communityId" @click="goCommunityDetail(item)">
          <div class="follow-union-list-left">
            <span v-show="!item.imgUrl" class="no-image">暂无图片</span>
            <img
              v-show="item.imgUrl"
              :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault"
            >
          </div>
          <div class="follow-union-list-right">
            <div class="follow-union-list-title">{{item.communityName}}</div>
            <div class="follow-union-list-num">
              开放式工位：
              <span>{{item.spacePrice}}</span> 元/月
            </div>
            <div class="follow-union-list-num">
              独立办公室：
              <span>{{item.officePrice}}</span> 元位·月
            </div>
            <div class="follow-union-list-bt">
              <div
                class="follow-union-list-l"
                @click.stop="delAttention(item.communityId,2)"
                style="cursor:pointer;"
              >取消关注</div>
              <!-- <div class="follow-union-list-l">进入楼盘</div> -->
              <!-- <div class="follow-union-list-img"><img src="../assets/images/icon_add.png"></div> -->
              <!-- <div class="follow-union-list-img">
                <img src="../assets/images/icon_delete.png">
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as collectAPI from "@/api/collect";
import * as attentionAPI from "@/api/attention";

export default {
  name: "Follow",
  data() {
    return {
      collectList: [], //收藏房源列表
      attentionList: [], //关注房源列表
      communityList: [], //关注的联合办公
      collectForm: {
        totalPrices: "0",
        area: "0",
        prices: "0",
        page: "1",
        size: "40"
      }, //收藏房源参数
      keyword: "",
      cur: 0,
      son: 0
    };
  },
  created() {
    this.getCollection(3);
    if (this.$route.query.index == "index") {
      this.getAttention(3);
    }
  },
  methods: {
    // 获取收藏的房源
    getCollection(type) {
      this.cur=0;
      this.collectList = [];
      if (this.son == type) {
        this.son = 3;
      } else {
        this.son = type;
      }
      switch (this.son) {
        case 0:
          this.collectForm = {
            totalPrices: "1",
            area: "0",
            prices: "0",
            page: "1",
            size: "40"
          };
          break;
        case 1:
          this.collectForm = {
            totalPrices: "0",
            area: "1",
            prices: "0",
            page: "1",
            size: "40"
          };
          break;
        case 2:
          this.collectForm = {
            totalPrices: "0",
            area: "0",
            prices: "1",
            page: "1",
            size: "40"
          };
          break;
        case 3:
          this.collectForm = {
            totalPrices: "0",
            area: "0",
            prices: "0",
            page: "1",
            size: "40"
          };
          break;
      }
      this.collectForm.keyword = this.keyword;
      collectAPI
        .collection(this.collectForm)
        .then(response => {
          response.data.rows.forEach(item => {
            let month = (item.price * item.area * 365) / 120000;
            item.monthPrice = month.toFixed(2);
            this.collectList.push(item);
          });
        })
        .catch(err => {
          console.log("收藏的房源列表=====>", err);
        });
    },
    // 跳转至房源详情
    goDetail(item) {
      window.open(
        "/three/fxfyxq.html?name=" +
          item.building3dCode +
          "&cnt=0&houseid=" +
          item.houseId +
          "&buildid=" +
          item.buildingId +
          ""
      );
    },
    // 跳转至楼盘详情
    goBuildingDetail(item) {
      window.open(
        "/three/main.html?name="+item.building3dCode+"&cnt=0&buildid="+item.buildingId
      );
    },
    // 跳转至联合办公详情
    goCommunityDetail(item){
      window.location.href='/item/views/community/unitedOfficeCommunity.html?id='+item.communityId;
    },
    // 收藏房源
    // addCollection() {
    //   collectAPI.addCollection({ houseId: "52" }).then(response => {
    //     this.attentionList = response.data;
    //   });
    // },
    searchList() {
      switch (this.cur) {
        case 0:
          this.getCollection(3);
          break;
        case 1:
          this.getAttention(3);
          break;
        case 2:
          this.getAttentionCommunity();
          break;
      }
    },

    // 取消收藏
    delCollection(houseId) {
      this.$confirm("确定取消收藏此房源?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        collectAPI
          .delCollection({ houseId: houseId })
          .then(response => {
            this.$message.success(response.message);
            this.getCollection(3);
          })
          .catch(err => {
            console.log("取消收藏====>", err);
          });
      });
    },
    // 获取关注的楼盘
    getAttention(type) {
      this.cur = 1;
      if (this.son == type) {
        this.son = 3;
      } else {
        this.son = type;
      }
      attentionAPI
        .getAttention({ keyword: this.keyword })
        .then(response => {
          this.attentionList = response.data;
        })
        .catch(err => {
          console.log("关注的楼盘列表=====>", err);
        });
    },
    // 取消关注
    delAttention(id, type) {
      let msg = "此楼盘";
      if (type == 1) msg = "此楼盘";
      else msg = "此社区";
      this.$confirm(`确定取消关注${msg}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        attentionAPI
          .delAttention({ attentionType: type, id: id })
          .then(response => {
            this.$message.success(response.message);
            if (type == 0) {
              this.getAttention();
            } else {
              this.getAttentionCommunity();
            }
          });
      });
    },
    // 获取关注的联合办公
    getAttentionCommunity() {
      this.cur = 2;
      attentionAPI
        .getAttentionCommunity({ keyword: this.keyword })
        .then(response => {
          this.communityList = response.data;
        })
        .catch(err => {
          console.log("关注的楼盘列表=====>", err);
        });
    }
  }
};
</script>
<style scoped>
.follow {
  padding: 25px;
  height: auto;
  overflow: auto;
}
/*关注楼盘tab切换样式*/
.follow-tab {
  display: flex;
  padding: 30px 0;
  background: #ffffff;
  position: relative;
}
.follow-tab-list {
  cursor: pointer;
  width: 150px;
  text-align: center;
  color: #778ca2;
  font-size: 14px;
}
.follow-tab .active {
  color: #009fe8;
}
.follow-tab .active:after {
  content: "";
  width: 80px;
  height: 2px;
  margin: 5px auto;
  display: block;
  background: #009fe8;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 30px;
  right: 45px;
}
.search-bt {
  margin-left: 15px;
}
.follow-list {
  background: #ffffff;
}
.follow-list-item {
  display: flex;
  padding: 0 20px 15px 20px;
}
.follow-list-item-click {
  font-size: 12px;
  color: #778ca2;
  width: 70px;
  text-align: center;
  cursor: pointer;
}
.follow-list-item-click > i {
  margin-left: 5px;
}
.follow-list-item .active {
  color: #009fe8;
}
/*关注楼盘收藏楼盘样式*/
.follow-floor-center {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0 10px 0 40px;
  background: #ffffff;
}
.follow-floor-list {
  width: 256px;
  border-radius: 10px;
  background: #ffffff;
  margin-right: 14px;
  margin-bottom: 35px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.follow-floor-list-img > img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 170px;
}
.follow-floor-list-title {
  color: #333333;
  font-size: 12px;
  margin-top: 10px;
  padding: 0 15px;
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.follow-floor-bt {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  justify-content: space-between;
}
.follow-floor-bt-title {
  color: #666666;
  font-size: 12px;
  margin-right: 8px;
}
.follow-floor-bt-title > span {
  color: #39b4ff;
  font-size: 16px;
}
.follow-floor-bt-name {
  color: #009fe8;
  font-size: 12px;
}
.follow-floor-bt-img {
  width: 20px;
  height: 20px;
}
/*关注联合办公样式*/
.follow-union-center {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px 30px 40px;
  background: #ffffff;
}
.follow-union-title {
  color: #778ca2;
  font-size: 12px;
  padding: 0 40px;
}
.follow-union-list {
  background: #ffffff;
  margin-left: 55px;
  margin-right: 15px;
  margin-top: 25px;
  display: flex;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.follow-union-list-left {
  width: 195px;
  height: 170px;
  padding-right: 20px;
  float: left;
  /* border-right:1px dashed #eee; */
}
.follow-union-list-left .no-image {
  font-size: 16px;
  color: #999;
  margin-left: 50px;
  line-height: 170px;
}
.follow-union-list-left > img {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
}
.follow-union-list-right {
  width: 195px;
  height: 170px;
  padding-right: 20px;
  padding-left: 10px;
}
.follow-union-list-title {
  width: 100%;
  padding-top: 30px;
  color: #333333;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-union-list-num {
  padding-top: 12px;
  color: #666666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-union-list-num > span {
  color: #39b4ff;
  font-size: 16px;
}
.follow-union-list-bt {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
}
.follow-union-list-l {
  font-size: 12px;
  color: #009fe8;
  margin-right: 20px;
}
.follow-union-list-img {
  width: 20px;
  height: 20px;
}
</style>
